---
type: tutorial
title: Build it yourself - Header
description: >-
  Tutorial: Build your first Astro blog —

  Use everything you've learned so far to build a header with responsive
  navigation
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


Since your site will be viewed on different devices, it's time to create a page navigation that can respond to multiple screen sizes!

<PreCheck>
  - Create a Header for your site that contains the Navigation component
  - Make the Navigation component responsive
</PreCheck>


<Box icon="puzzle-piece">

## Try it yourself - Build a new Header component

<Steps>
1. Create a new Header component. Import and use your existing `Navigation.astro` component inside a `<nav>` element which is inside a `<header>` element.

    <details>
    <summary>Show me the code!</summary>

    Create a file named `Header.astro` in `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>




<Box icon="puzzle-piece">

## Try it yourself - Update your pages

<Steps>
1. On each page, replace your existing `<Navigation/>` component with your new header.

    <details>
    <summary>Show me the code!</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Home Page";
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Check your browser preview and verify that your header is displayed on every page. It won't look different yet, but if you inspect your preview using dev tools, you will see that you now have elements like `<header>` and `<nav>` around your navigation links.
</Steps>
</Box>

## Add responsive styles

<Steps>
1. Update `Navigation.astro` with the CSS class to control your navigation links. Wrap the existing navigation links in a `<div>` with the class `nav-links`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div class="nav-links">
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/blog">Blog</a>
    </div>
    ```

2. Copy the CSS styles below into `global.css`. These styles:

    - Style and position the navigation links for mobile
    - Include an `expanded` class that can be toggled to display or hide the links on mobile
    - Use a `@media` query to define different styles for larger screen sizes

    :::tip[Mobile-first design]
    Start by defining what should happen on small screen sizes first! Smaller screen sizes require simpler layouts. Then, adjust your styles to accommodate larger devices. If you design the complicated case first, then you have to work to try to make it simple again.
    :::

    ```css title="src/styles/global.css" ins={23-100}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* nav styles */

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

    }
    ```
</Steps>

Resize your window and look for different styles being applied at different screen widths. Your header is now **responsive** to screen size through the use of `@media` queries.



<Box icon="check-list">

## Checklist

<Checklist>
- [ ] I can use CSS to add responsive elements to my site.
</Checklist>
</Box>

### Resources

- [Component-based Design](https://www.droptica.com/blog/component-based-design/) <Badge>external</Badge>

- [Semantic HTML Tags](https://www.dofactory.com/html/semantics) <Badge>external</Badge>

- [Mobile-first Design](https://www.mobileapps.com/blog/mobile-first-design) <Badge>external</Badge>
